<template>
  <div class="post">
    <h2 class="post-title">{{post.title}}</h2>
    <span class="post-meta">
      <router-link :to="`/category/${post.parent}`" class="post-category" v-if="post.parent">
        {{post.parent}}
      </router-link>
      <a :href="post.edit_url" class="post-edit" target="_blank">编辑</a>
    </span>
    <div class="post-content" v-html="post.content"></div>
    <h3>评论</h3>
    <div id="comment-list">
      <!--<p v-if="!post.comments.length">暂无评论</p>-->
    </div>
  </div>
</template>
<script>
import util from '../util'
import docMan from '../docMan'

export default {
  name: 'PostView',
  computed: {
    formatedView () {
      return util.formatNumber(this.post.view)
    }
  },
  data () {
    return {
      post: {}
    }
  },
  beforeMount () {
    docMan.file(this.$route.params[0] || '/README.md').then(data => {
      this.post = data
    })
  },
  watch: {
    $route (to) {
      docMan.file(to.params[0]).then(data => {
        this.post = data
      })
    }
  }
}
</script>
<style>
  @import "../md0/md0.css";
</style>
<style lang="less">
  h2 {
    font-size: 2rem;
    color: #535453;
  }

  .post {
    margin: 10px 0 20px;
    padding: 0 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  .post-meta {
    display: block;
    height: 32px;
    line-height: 32px;
    margin-bottom: 20px;
    color: #666;
    > * {
      vertical-align: middle;
    }
  }

  .post-edit {
    display: block;
    float: right;

    &:before {
      content: '[';
    }
    &:after {
      content: ']';
    }
  }

  .post-category {
    padding: 3px 5px;
    margin-right: 5px;
    background-color: #d7eae5;
    color: #357d5c;
  }

  .post-content {
    margin-bottom: 60px;
    line-height: 1.8rem;
    -ms-word-wrap: break-spaces;
    word-wrap: break-spaces;
    word-break: break-all;
  }

  #comment-list {
    font-size: 0.9rem;
    color: #666;
  }

  .content-raw {
    overflow-x: auto;
    line-height: 20px;
  }
</style>
